<template>
  <el-dialog destroy-on-close title="退回到之前节点" :visible.sync="show" width="650px" v-bind="$attrs" v-on="$listeners"
    append-to-body @close="handleCancel" :close-on-click-modal="false" @opened="handleOpen">
    <j-form-container>
      <a-form-model ref="formRef" :model="formValue" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="回退节点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rollbackId">
              <a-select v-model="formValue.rollbackId" placeholder="请选择回退到的节点" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
                <a-select-option v-for="d in rollbackIdOptions" :key="d.value" :value="d.value">
                  {{d.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="退回意见" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comments">
              <a-textarea v-model="formValue.comments" placeholder="请输入退回意见" :auto-size="{ minRows: 4, maxRows: 5 }" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageList">
              <j-image-upload v-model="formValue.imageList" :isMultiple = "true" @change="imgChange"></j-image-upload>
              <div class="el-upload__tip">添加图片 | 每张图不超过10MB</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileList">
              <j-upload v-model="formValue.fileList" @change="fileChange"></j-upload>
              <div class="el-upload__tip">添加附件 | 单个附件不超过100MB</div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <template #footer>
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleConfirm">提 交</el-button>
    </template>
  </el-dialog>
</template>

<script>
  // import {
  //   rollback,
  //   getRollbackNodes
  // } from "@/api/wflow/design";
 import { httpAction,getAction} from '@/api/manage'
  export default {
    name: "RollbackModal",
    components: {},
    props: {
      // 是否显示
      visible: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        loading: false,
        formValue: {
          comments: "",
          imageList: "",
          fileList: "",
        },
        rollbackIdOptions: [],  //回退节点数据
        imageList: [],  //图片列表
        fileList: [],  //文件列表
        multiple:false,
        show:false,
        processInfo:{},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        validatorRules:{
          rollbackId:[{ required:true,message:'请选择回退到的节点' }],
        },
        url:{
          rollbackNodes:'workspace/rollbackNodes',
          rollback:'workspace/rollback',
        },
      };
    },

    methods: {
      //显示弹窗
      showModal(record){
        this.processInfo = record
        this.formValue = {
          comments: "",
          imageList: "",
          fileList: "",
        }
        this.imageList = []
        this.fileList = []  
        this.show = true
      },
      //上传图片
      imgChange(value){
        this.imageList = []
        if(value){
          let list = value.split(',')
          list.map((item)=>{
            let lastOf = item.lastIndexOf('/') // '/'所在的最后位置
            const name = item.substr(lastOf + 1) //截取文件名称和后缀
            this.imageList.push({name:name, url:item,type:'image'})
          })
        }else{
          this.imageList = []
        }
      },
      //上传文件
      fileChange(value){
        this.fileList = []
        if(value){
          let list = value.split(',')
          list.map((file)=>{
            let lastOf = file.lastIndexOf('/') // '/'所在的最后位置
            const name = file.substr(lastOf + 1) //截取文件名称和后缀
            this.fileList.push({name:name, url:file,type:'file'})
          })
        }else{
          this.fileList = []
        }
      },
      // 确认操作
      handleConfirm() {
        this.$refs.formRef.validate((valid) => {
          if (!valid) return;
          const {
            imageList,
            fileList,
            ...restParams
          } = this.formValue;
          const params = {
            ...this.processInfo,
            ...restParams,
            attachments: [...this.imageList, ...this.fileList],
          };
          this.loading = true;
          httpAction(this.url.rollback,params,'post')
            .then((res)=>{
              if(res.success){
                this.$message.success("操作成功");
                this.handleCancel();
                this.$emit("ok",'rollback');
              }else{
                this.$message.warning(res.message)
              }
            })
            .finally(()=>{
              this.loading = false;
            })
        });
      },
      // 取消操作
      handleCancel() {
        this.$refs.formRef.resetFields();
        this.formValue = {
          rollbackId: "",
          comments: "",
          imageList: [],
          fileList: [],
        };
        this.options = [];
        this.show = false;
      },
      handleOpen(){
        const { processInstanceId,taskId} = this.processInfo;
        getAction(this.url.rollbackNodes,{processInstanceId,taskId})
           .then((res)=>{
             if(res.success){   
                const nodes = res.result || {};
                this.rollbackIdOptions = Object.keys(nodes).map((key) => {
                  return {
                    label: nodes[key],
                    value: key,
                  };
                });       
             }else{
               this.$message.warning(res.message)
             }
             
           })
      },
   
    },
  };
</script>
<style lang="less" scoped>
  /deep/.ant-select-dropdown{
    z-index:9999
  }
  .el-upload__tip {
    font-size: 12px;
    color: #606266;
  }
  
  /deep/.ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0;
  }
</style>